<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讨论回复</title>
    <link rel="icon" href="../image/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="../plugs/layui/dist/css/layui.css">
    <script type="text/javascript" src="../js/head-nav.js"></script>
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
    /* .layui-row div{
        border:  2px solid red;
    } */
    body {
        height: auto;
    }

    .layui-container {
        padding: 10px;
    }

    .header span {
        color: #c2c2c2;
        font-size: 14px;
        display: inline-block;
        line-height: 30px;
        margin-right: 1px;
    }

    .artr {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

    .cartr {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .layui-btn-normal {
        text-align: center;
        margin-top: 3px;
    }

    .center2 p {
        font-size: 12px;
        color: #c1c1c1;
    }

    .center2,
    .content {
        margin-top: 6px;
    }

    .content {
        margin-bottom: 30px;
    }

    .foot i {
        line-height: 40px;
    }


    .userinfo {
        border: none;
        box-shadow: 0px 0px 10px #c3c3c3;
        border-radius: 10px;
        padding: 30px;
    }

    .right>div {
        padding: 20px;
        margin-left: 20px;
        border: none;
        box-shadow: 0px 0px 10px #c3c3c3;
        border-radius: 10px;
    }

    .one div {
        margin-top: 5px;
    }

    .two span {
        margin: 5px;
        background-color: rgb(217, 233, 255);
    }

    .right h3 {
        color: #c3c3c3;
    }

    .headimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        line-height: 40px;
    }

    .layui-col-md10 h3 {
        display: inline-block;
    }

    .dis {
        line-height: 30px;
        margin-top: 20px;
    }

    /*评论展示区*/
    .comment-list {
        margin-top: 10px;
    }

    .comment-line-box {
        padding: 8px 0px;
    }

    .replay-box .comment-list {
        margin-left: 32px;
        padding-left: 10px;
        border-left: 2px solid #f5f6f7;
        border-bottom: none;
    }

    .comment-line-box .nickname {
        color: #009688;
    }

    .comment-line-box .opt {
        margin-left: 10px;
    }

    .comment-line-box .opt a {
        font-size: 12px;
        margin-left: 5px;
    }

    textarea {
        min-width: 500px;
        max-width: 800px;
        min-height: 100px;
        max-height: 100px;
    }
</style>

<body>

    <div class="layui-container">
        <div class="layui-row layui-col-space5">

            <div class="layui-col-xs6 layui-col-sm6 layui-col-md7 ">
                <div class="userinfo">
                    <div class="header"><span>讨论</span>&nbsp;/<span>求职面试&nbsp;</span>/<span>如何在&nbsp;</span>「<span>
                            求职面试」&nbsp;</span> <span id="titles"> &nbsp;</span></div>
                    <hr class="layui-border-green">
                    <div class="center1 layui-row ">
                        <div class="layui-col-md10"> <img src="" class="artr" id="avatars"></img>
                            <h3><b id="title2"></b></h3>
                        </div>
                        <div class="layui-col-md2"><Button class="layui-btn layui-btn-radius layui-btn-normal"><i
                                    class="layui-icon layui-icon-addition"></i> 关注&nbsp;TA</Button></div>
                    </div>
                    <div class="center2">
                        <p>力扣 (LeetCode)发起于 &nbsp;<span>2021-03-15</span> &nbsp;&nbsp; 最近编辑于
                            &nbsp;<span>2021-04-23&nbsp;&nbsp;</span>来自 &nbsp;<span>上海</span></p>
                    </div>
                    <div class="content">
                        <p id="cts"></p>
                        <br>
                        <p id="ctp"></p>
                    </div>
                    <div>
                        <hr class="layui-border-green">
                    </div>
                    <div class="foot layui-row">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md1 "><i class="layui-icon "
                                id="like"> </i></div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md1 "><i
                                class="layui-icon layui-icon-star-fill">收藏</i> </div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md1 "><i
                                class="layui-icon layui-icon-share">分享</i> </div>
                        <div class="layui-col-xs6 layui-col-sm6  layui-col-md1 layui-col-md-offset4 ">
                            <button onclick="to_reply()" type="button" class="layui-btn layui-btn-danger"> <i
                                    class="layui-icon layui-icon-snowflake"></i>讨论回复</button>
                        </div>
                        <div class="layui-col-xs6 layui-col-sm6  layui-col-md1 layui-col-md-offset2"> <button
                                class="layui-btn layui-btn-primary layui-border-red"><i
                                    class="layui-icon layui-icon-edit"></i> 接受动态</button></div>
                        <div id="input_discuss" style="display:none ;">
                            <textarea required lay-verify="required" placeholder="请输入" class="layui-textarea"
                                id="discuss_info"></textarea>
                            <button class="layui-btn layui-btn-primary layui-border-orange"
                                style="margin-left:530px;margin-top:10px" onclick="send()">发送</button>
                        </div>
                        <div class="layui-col-md12">
                            <div class="comment-list-box" id="comment">
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 right">
                <div class="one">
                    <div class="layui-row">
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 ">参与人数</div>
                        <div class="layui-col-xs6 layui-col-sm6 layui-col-md2 layui-col-md-offset6"">30</div>
                </div>
                <div class=" layui-row">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 ">收藏次数</div>
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md2 layui-col-md-offset6"">36</div>
                </div>
                <div class=" layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 ">浏览次数</div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md2 layui-col-md-offset6"">300</div>
                </div>
                <div>
                    <hr class=" layui-border-green">
                                </div>
                                <div>
                                    <h3 class="tagtitle">相关标签</h3>
                                </div>
                                <div>
                                    <div class="two"><span>置顶</span> <span>官方</span> <span>推荐</span> <span>热门</span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <h3><i class="layui-icon layui-icon-edit layui-icon-fire"></i>相关讨论</h3>
                                </div>
                                <div> <img src="../image/headimg.jpg" class="headimg">&nbsp;<span class="dis">
                                        学历歧视严重吗？</span> </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md4 "><img src="../image/erweima.png"
                                        alt=""></div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md8">力扣（LeetCode）App 随时随地参与讨论 App
                                    扫一扫 即刻参与</div>
                            </div>
                        </div>
                    </div>
                </div>


                <script src="../js/bottom-nav.js"></script>

                <script src="../js/vue.js"></script>
                <script src="../js/jquery.min.js"></script>
                <script src="../plugs/layui/src/layui.js"></script>
                <script src="../js/jquery.params.js"></script>

                <script>


                    $(function () {
                        let id = $.query.get("id");
                        var commentlist;
                        var rid;
                        var cid;
                        var replys;
                        var uuids;
                        $("#like").click(function () {

                            $.ajax({
                                type: "post",
                                url: "http://localhost:70/devu/like/save",
                                headers: { token: localStorage.getItem("token") },
                                data: { discussid: id },
                                success: function (res) {
                                    if (res.code == "200") {
                                        $("#like").removeClass("layui-icon-heart");
                                        $("#like").addClass("layui-icon-heart-fill");
                                        let likes = parseInt($("#like").text()) + 1;
                                        $("#like").text(likes);
                                    }
                                    else {
                                        layer.msg(res.msg, { icon: 2, anim: 6 });
                                    }
                                }
                            })

                        })
                        //TODO 获取讨论信息

                        $.ajax({
                            type: "get",
                            url: "http://localhost:70/devu/like/get",
                            headers: { token: localStorage.getItem("token") },
                            data: { discussId: id },
                            success: function (res) {
                                if (res.code == "200") {
                                    $("#like").removeClass("layui-icon-heart");
                                    $("#like").addClass("layui-icon-heart-fill");
                                    uuids = res.content;

                                }
                                else {
                                    $("#like").addClass("layui-icon-heart");
                                    $("#like").removeClass("layui-icon-heart-fill");
                                }
                            }
                        })


                        $.get('http://localhost:70/devu/discuss/getOne', { id: id }, function (res) {
                            let datas = res.content;
                            console.log(datas)
                            let avatar = datas.discussion.avatar;
                            let title = datas.discussion.title;
                            let des = datas.discussion.description;
                            let ctp = datas.discussion.content;
                            let likenum = datas.count;
                            $("#avatars").attr('src', "http://localhost:70/cattle-and-horses-oj-html/image/" + avatar)
                            $("#titles").text(title);
                            $("#title2").text(title);
                            $("#cts").text(des);
                            $("#ctp").text(ctp);
                            $("#like").text(likenum);
                        })


                        $.ajax({
                            type: "get",
                            url: "http://localhost:70/devu/comment/comments",
                            data: { discussId: id },
                            success: function (res) {
                                commentlist = res.content;
                                document.getElementById("comment").innerHTML = function () {
                                
                                    var arr = [],
                                        thisData = commentlist;
                                    layui.each(thisData, function (index, item) {
                                        arr.push('<ul class="comment-list" id="commiter_' + item.uuId + '"> <li class="comment-line-box d-flex"> <a href="#"> <img class="cartr" src="../image/' + item.cavatar + '"><span class="nickname">' + item.nickName + '</span> </a> <span class="colon">:</span> <span class="comment">' + item.content + '</span> <span class="opt"> <a href="javascript:reply(' + "\'" + item.id + "\'" + "," + "\'" + item.uuId + "\'" + ')" onclik="return false;">回复</a> </span><span class="opt del_comment_' + item.uuId + '" style="display:none;" > <a href="javascript:del_comment(' + "\'" + item.id + "\'" + ')" onclik="return false;" >删除</a></span></li>');
                                        arr.push('<div id="input_reply_' + item.id + '" style="display:none;"> <textarea required lay-verify="required" placeholder="请输入" class="layui-textarea" id="discuss_info' + item.id + '"></textarea> <button class="layui-btn layui-btn-primary layui-border-orange" style="margin-left:530px;margin-top:10px" onclick="send_reply()">回复</button> </div>');
                                        if (null != item.countR) {
                                            get_reply(item.id, item.nickName, item.uuId);
                                            arr.push(replys.join(''));
                                        }
                                        arr.push('</ul>');
                                    });
                                    return arr.join('');
                                }();
                                $(".del_reply_" + uuids).attr("style", "display:inline");
                                $(".del_comment_" + uuids).attr("style", "display:inline");
                            }
                        });

                        // 讨论信息结束................

                        get_reply = function (cId, toNickName, toId) {
                            $.ajax({
                                type: "get",
                                url: "http://localhost:70/devu/comment/rcomment",
                                async: false,
                                data: { cId: cId },
                                success: function (res) {
                                    replys = [];
                                    $.each(res.content, function (index, item) {
                                        replys.push('<li class="replay-box" style="display:block"> <ul class="comment-list"> <li class="comment-line-box"> <a href="#"> <img class="cartr" src="../image/' + item.cavatar + '"><span class="nickname">' + item.nickName + '</span> </a> <span class="text">回复</span> <a href="#"> <span class="nickname">' + item.rnickname + '</span> </a> <span class="colon">:</span> <span class="comment">' + item.content + '</span> <span class="opt"> <a href="javascript:reply(' + "\'" + cId + "\'" + "," + "\'" + item.uuId + "\'" + ')" onclik="return false;">回复</a></span> <span class="opt del_reply_' + item.uuId + '" style="display:none;" > <a href="javascript:del_reply(' + "\'" + item.id + "\'" + ')" onclik="return false;" >删除</a></span></li> </ul> </li>');
                                        replys.push('<div id="input_reply_' + cid + '" style="display:none ;"> <textarea required lay-verify="required" placeholder="请输入" class="layui-textarea" id="discuss_info' + item.id + '"></textarea> <button class="layui-btn layui-btn-primary layui-border-orange" style="margin-left:530px;margin-top:10px" onclick="send_reply()">回复</button> </div>');
                                    });
                                }
                            });
                        }

                        to_reply = function () {
                            $("#input_discuss").fadeToggle();
                        }
                        reply = function (cids, tuid) {
                            cid = cids;
                            touid = tuid;
                            layer.open({
                                type: 1,
                                title: "回复评论",
                                skin: "myclass",//自定样式
                                area: ["700px", "200px"],
                                content: $("#input_reply_" + cid),
                                success: function (layero, index) {
                                },
                                yes: function () {
                                }
                            });
                        }
                        send_reply = function () {
                            let msg = $("#discuss_info" + cid).val();
                            if (null == msg) {
                                msg = $("#discuss_info" + touid).val();
                            }
                            $.ajax({
                                type: "get",
                                headers: { token: localStorage.getItem("token") },
                                url: "http://localhost:70/devu/comment/reply",
                                data: { id: id, msg: msg, cid: cid, touid: touid },
                                success: function (res) {
                                    if (res.code == "200") {
                                        $("#input_discuss").fadeToggle();
                                        layer.msg('评论成功...', { icon: 1, anim: 6 });
                                        window.setTimeout(function () {
                                            window.location.reload();
                                        }, 800)
                                    }
                                    else {
                                        layer.msg('评论失败.', { icon: 2, anim: 6 });
                                    }
                                }
                            })
                        }
                        send = function () {
                            let msg = $("#discuss_info").val();
                            $.ajax({
                                type: "get",
                                headers: { token: localStorage.getItem("token") },
                                url: "http://localhost:70/devu/webs/reply",
                                data: { id: id, msg: msg },
                                success: function (res) {
                                    if (res.code == "200") {
                                        $("#input_discuss").fadeToggle();
                                        layer.msg('评论成功...', { icon: 1, anim: 6 });
                                        window.setTimeout(function () {
                                            window.location.reload();
                                        }, 800)
                                    }
                                    else {
                                        layer.msg('评论失败.', { icon: 2, anim: 6 });
                                    }
                                }
                            })
                        }
                        del_reply = function (drId) {
                            layer.alert('是否删除回复?', {
                                icon: 5,
                                anim: 6,
                                btn: ['确定', '取消'],
                                yes: function () {
                                    $.ajax({
                                        type: "get",
                                        headers: { token: localStorage.getItem("token") },
                                        url: "http://localhost:70/devu/comment/delreply",
                                        data: { rid: drId, },
                                        success: function (res) {
                                            if (res.code == "200") {
                                                layer.msg('删除成功.', { icon: 1, anim: 6 });
                                                window.setTimeout(function () {
                                                    window.location.reload();
                                                }, 800)
                                            }
                                            else {
                                                layer.msg('删除失败.', { icon: 2, anim: 6 });
                                            }
                                        }
                                    })
                                }
                            });
                        }
                        del_comment = function (dcid) {
                            layer.alert('是否删除评论?', {
                                icon: 5,
                                anim: 6,
                                btn: ['确定', '取消'],
                                yes: function () {
                                    $.ajax({
                                        type: "get",
                                        headers: { token: localStorage.getItem("token") },
                                        url: "http://localhost:70/devu/comment/delcomment",
                                        data: { cid: dcid},
                                        success: function (res) {
                                            if (res.code == "200") {
                                                layer.msg('删除成功.', { icon: 1, anim: 6 });
                                                window.setTimeout(function () {
                                                    window.location.reload();
                                                }, 800)
                                            }
                                            else {
                                                layer.msg('删除失败.', { icon: 2, anim: 6 });
                                            }
                                        }
                                    })
                                }
                            });
                        }
                    })
                </script>
</body>

</html>